<template>
	<view class="animated fadeIn faster">
		<loadings v-if="isLoading"></loadings>
		<view class="position-fixed w-100 z-index-100 bg-fff left-0 right-0 top-0" style="z-index: 99999999998;"
			:style="{'paddingTop':$store.state.statusBarHeight+'px'}">
			<view class="d-flex d-flex-middle pr-2 position-relative"
				:class="toItem.id==111? 'text-center' : 'd-flex-between'"
				:style="{'height': $store.state.titleBarHeight + 'px'}">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font32"></text></view>
				<view class="font-bold text-ellipsis" :style="{maxWidth: toItem.id==111? 'none' : '200rpx'}" :class="toItem.id==111? 'w-100' : ''">{{toItem.name || '嗒友'}}</view>
				<text class="iconfont icon-gengduo" style="font-size: 37rpx;" v-if="toItem.id != 111" @click="showMorePopup"></text>
				<view v-if="showMore" @click="showMorePopup" class="position-fixed top-0 left-0 right-0 bottom-0"
					style="background: transparent;">
					<view class="position-absolute"
						:style="{top: $store.state.titleBarHeight + $store.state.statusBarHeight + 10 + 'px'}"
						style="right: 20rpx;">
						<view class="bg-fff rounded30 d-flex d-flex-column" style="width: 180rpx;">
							<view @click="touser" class="font28 text-center" style="height: 60rpx; line-height: 60rpx;">查看资料</view>
							<view @click="TopChat" class="font28 text-center" style="height: 60rpx; line-height: 60rpx;">置顶聊天</view>
							<view @click="Block" class="font28 text-center" style="height: 60rpx; line-height: 60rpx;">拉黑</view>
							<view @click="gotoReportPage" class="font28 text-center"style="height: 60rpx; line-height: 60rpx;">举报</view>
						</view>
					</view>
				</view>
			</view>
			<view 
				class="w-100 d-flex d-flex-middle d-flex-between" 
				style="height: 40px; background: #3fcecc;"
				v-if="$store.state.user.accountType==1 && toItem.id != 111 && ShowMemmberView"
				@click="gotoMemberPage"
			>
				<image class="mx-3" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/remind.png" style="width: 45rpx; height: 45rpx;"></image>
				<view class="colorfff d-flex-item">开通 VIP 有更多打招呼次数>></view>
				<image @click.stop="CloseMemmberView" class="mr-3" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/close-fff.png" style="width: 25rpx; height: 25rpx;"></image>
			</view>
		</view>
		<view class="position-fixed" style="top: 300rpx; right: 40rpx; z-index: 999999" v-if="toItem.id != 111">
			<view class="hexagon">
				<div class="position-absolute z-index-100 colorfff"
					style="top: 50%; left: 50%; transform: translate(-50%, -50%);">{{IntimityVal}}</div>
				<view class="ripple ripple-1"></view>
				<view class="ripple ripple-2"></view>
				<view class="ripple ripple-3"></view>
				<view class="ripple ripple-4"></view>
			</view>
		</view>
		<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.user.accountType==1 && toItem.id != 111 && ShowMemmberView? $store.state.titleBarHeight + 40 + 'px' : $store.state.titleBarHeight + 'px'}"></view>
		<scroll-view ref="scrollview" scroll-y="true" class="scroll-view" :show-scrollbar="false"
			:style="{height: srcollViewHeight + 'px'}" :scroll-into-view="scrollIntoID" :scroll-with-animation="true" @scrolltoupper="getMessageList">
			<view class="px-3 pt-1">
				<view class="d-flex d-flex-center py-2" @click="getMessageList" v-show="!isCompleted">
					<text class="color999 font24">{{isCompleted?'':'点击查看更多信息'}}</text>
				</view>
				<view class="px-3 bg-fff rounded20" v-if="toItem.id != 111">
					<view class="d-flex d-flex-middle d-flex-between">
						<view class="d-flex d-flex-middle py-4">
							<image :src="toItem.avatar" class="rounded" style="width: 100rpx; height: 100rpx;"></image>
							<view class="ml-2 font34 font-bold">{{toItem.name}}</view>
						</view>
						<view class="d-flex-btn px-2 py-1 rounded40" style="background: #ecfafa;">
							<view class="font24" style="color: #61c0bb;" @click="touser">查看主页</view>
							<text class="iconfont icon-youjiantou font24" style="color: #61c0bb;"></text>
						</view>
					</view>
					<view style="overflow: hidden;">
						<view class="d-flex d-flex-middle mb-3">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/tag.png"
								style="width: 20rpx; height: 20rpx;"></image>
							<view class="ml-2 font24 color666">搭子卡：</view>
							<view class="font24 font-bold" v-for="(game, idx) in GameCardList" :key="game.id">
								{{idx == GameCardList.length-1? game : game+'、'}}</view>
						</view>
						<view class="d-flex d-flex-middle mb-3" v-if="toItem.signature">
							<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/tag.png"
								style="width: 20rpx; height: 20rpx;"></image>
							<view class="ml-2 font24 color666 text-clamp">{{toItem.signature}}</view>
						</view>
					</view>
				</view>
				<view class="mt-4 d-flex" v-for="(item,index) in msgList" :key="index" :id="'chatId_' + index"
					:class="{'d-flex-end':item.flow == 'out'}">
					<image v-if="item.flow == 'in'"
						:src="item.avatar || 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241220111921-8eee693f-83b2-41d6-bf0c-3683248035f7.jpg'"
						style="width: 34px;height:34px;border-radius: 34px;"></image>
					<view style="max-width: 530rpx;" :class="item.flow == 'out'?'mr-1':'ml-1'">
						<view v-if="item.type == 'TIMTextElem'" class="l-txt line-height40"
							:class="item.flow == 'out'?'l-txt-r':'l-txt-l'">
							<view style="max-width: 300rpx;">{{item.payload.text}}</view>
						</view>
						<view class="d-flex d-flex-column d-flex-middle" v-if="item.type == 'TIMCustomElem'">
							<template v-if="item.payload.data == 'GIFT'">
								<image :src="JSON.parse(item.payload.extension).icon" mode="widthFix"
									style="width: 200rpx;" @click="playGift(JSON.parse(item.payload.extension).svga)">
								</image>
								<text class="color999 font20 mt-1 mb">{{JSON.parse(item.payload.extension).name}}</text>
								<text class="color999 font20">{{JSON.parse(item.payload.extension).price || 0}}嗒币</text>
							</template>
							<template v-else-if="item.payload.data == 'image'">
								<image v-if="item.payload.extension" :src="item.payload.extension" mode="widthFix"
									style="width: 200rpx;" @click="preview(item.payload.extension,0)"></image>
							</template>
							<template v-else-if="item.payload.data == 'audio'">
								<view class="message-content-voice d-flex d-flex-center d-flex-middle"
									@click="playAudio(item, index)">
									<image class="message-voice-icon"
										:src="playVoiceAnimationIndex==index?'https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/play.gif':'https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/audio3.png'"
										mode=""></image>
									<text
										class="message-voice-text">{{JSON.parse(item.payload.extension).duration}}</text>
								</view>
							</template>
						</view>
					</view>
					<image v-if="item.flow == 'out'"
						:src="item.avatar || 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241220111921-8eee693f-83b2-41d6-bf0c-3683248035f7.jpg'"
						style="width: 34px;height:34px;border-radius: 34px;"></image>
				</view>
			</view>
		</scroll-view>
		<view ref="foot" id="footer-wrap" class="footer-wrap" :style="{'bottom':keyboardHeight+'px'}">
			<view class="d-flex d-flex-middle d-flex-between p-2">
				<view class="d-flex d-flex-center d-flex-middle" style="width: 50rpx;height: 50rpx;"
					@click="changeVoice">
					<text class="iconfont font40 color71" :class="voice?'icon-jianpan1':'icon-yuyinqiehuan'"></text>
				</view>
				<view class="ft-area d-flex d-flex-center color71 font26 bg-f8" style="border-color: #f8f8f8;"
					@touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd"
					@touchcancel="voiceCancel" v-if="voice">{{voiceTis}}</view>
				<!-- #ifdef APP -->
				<input v-model="msg" class="ft-area" @input="oninput" style="margin: 0;" placeholder="请输入消息...."
					placeholder-style="color:#bfbfbf" @confirm="sendMessage" confirm-type="send" v-if="!voice"></input>
				<!-- #endif -->
				<!-- #ifndef APP -->
				<input v-model="msg" :adjust-position="false" @input="oninput" class="ft-area" style="margin: 0;"
					placeholder="请输入消息...." placeholder-style="color:#bfbfbf" @confirm="sendMessage" confirm-type="send"
					v-if="!voice"></input>
				<!-- #endif -->
				<view class="mx-1 colorfff rounded40 text-center" @click="sendMessage"
					:style="{'background': sentBtnStyly}" style="height: 70rpx; width: 120rpx; line-height: 70rpx;">发送
				</view>
			</view>
			<view class="d-flex d-flex-middle d-flex-between px-3 pb-6">
				<view class="d-flex d-flex-center d-flex-middle" style="width: 50rpx;height: 50rpx;"
					@click="chooseImage">
					<text class="iconfont font40 icon-tupian color71"></text>
				</view>
				<view class="d-flex d-flex-center d-flex-middle" style="width: 50rpx;height: 50rpx;"
					@click="caputerImage">
					<text class="iconfont icon-paizhao color71" style="font-size: 52rpx;"></text>
				</view>
				<view class="d-flex d-flex-center d-flex-middle" style="width: 50rpx;height: 50rpx;" @click="openFace">
					<text class="iconfont font40 icon-icon_xiaolian-xian color71"></text>
				</view>
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/gift.png"
					style="width: 45rpx;height: 47rpx;" @click="openGift"></image>
			</view>
		</view>
		<view class="position-fixed w-100 overflow bg-f8" style="height: 180rpx;" :style="{bottom: emotionBottom + 'px'}" v-show="!firstMes && FirstMesEmotionList.length != 0">
			<view class="w-100 h-100 py-1" style="overflow-y: scroll;">
				<view class="d-flex" style="height: 160rpx;" :style="{width: FirstMesEmotionList.length * 150 + 'rpx'}">
					<view 
						class="d-flex d-flex-column d-flex-center d-flex-middle" 
						style="width: 150rpx; height: 160rpx;"
						v-for="i in FirstMesEmotionList" :key="i.id"
						@click="SendEmotion(i, 'FirstSend')"
					>
						<image :src="i.thumb.gif? i.thumb.gif : i.thumb.webp" mode="aspectFit" style="width: 150rpx; height: 150rpx;"></image>
						<text class="text-clamp text-center" style="width: 150rpx;">{{i.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="position-fixed w-100 overflow bg-f8" style="height: 180rpx;" :style="{bottom: emotionBottom + 'px'}" v-show="emotionList.length != 0">
			<view class="w-100 h-100 py-1" style="overflow-y: scroll;">
				<view class="d-flex" style="height: 160rpx;" :style="{width: emotionList.length * 150 + 'rpx'}">
					<view 
						class="d-flex d-flex-column d-flex-center d-flex-middle" 
						style="width: 150rpx; height: 160rpx;"
						v-for="i in emotionList" :key="i.id"
						@click="SendEmotion(i, 'other')"
					>
						<image :src="i.thumb.gif? i.thumb.gif : i.thumb.webp" mode="aspectFit" style="width: 150rpx; height: 150rpx;"></image>
						<text class="text-clamp text-center" style="width: 150rpx;">{{i.name}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="record" v-if="recording">
			<view class="ing">
				<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/recording.gif" class="recording"
					mode="aspectFit"></image>
			</view>
			<view class="d-flex recordTis"><text class="recordTis-text">{{recordTis}}</text></view>
		</view>
		<uni-popup ref="giftPopup" @touchmove.stop.prevent="moveHandle" @maskClick="closeGift"
			:mask-background-color="'rgba(0,0,0,0)'" type="bottom" style="position: relative;z-index: 999997;">
			<view class="wrap">
				<view class="wrap-hd d-flex d-flex-between d-flex-middle">
					<view class="wrap-hd-send py-1 px-2 d-flex d-flex-middle">
						<text class="font26 colorfff">送给</text>
						<image :src="toItem.avatar" class="rounded mx-1" style="width: 40rpx;height: 40rpx;"></image>
						<text class="font26 colorfff">{{toItem.name}}</text>
					</view>
					<!-- <text class="iconfont icon-cuowu3 font30" style="color: rgba(255,255,255,.4);" @click="closeGift"></text> -->
					<view class="d-flex d-flex-middle" @click="payOne">
						<text class="coloryellow mr-1">首充免费获得赞</text>
						<image
							src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241230154632-2d364975-4d49-40a0-8654-70ea312f1b9f.png"
							style="width: 125rpx;height: 50rpx;"></image>
					</view>
					<!-- https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/appUpload/20241230154632-2d364975-4d49-40a0-8654-70ea312f1b9f.png -->
				</view>
				<view class="wrap-bd mb-3">
					<swiper indicator-dots :interval="5000" :duration="1000" indicator-active-color="#ffffff"
						indicator-color="#999999" class="position-relative"
						style="width:748rpx;height: 460rpx;overflow: hidden;">
						<block v-for="(item,idx) in giftsList" :key="idx">
							<swiper-item>
								<view class="swiper-item">
									<view style="width: 748rpx;" class="d-flex d-flex-wrap">
										<view class="wrap-item d-flex d-flex-column d-flex-middle"
											v-for="(gift,gindex) in item" :key="gift.id"
											:class="{'wrap-item-on':(idx*8+gindex)==giftIndex}"
											@click="pickGift(idx,gindex)">
											<image :src="gift.icon" mode="heightFix"
												style="height: 90rpx;margin-top: 10rpx;"></image>
											<text class="colorfff mt-1 mb">{{gift.name}}</text>
											<text class="color71 font22">{{systemInfo.platform=='iOS'? gift.iosCoinPrice : gift.androidCoinPrice}}嗒币</text>
											<text class="color71 font22">×{{gift.count}}</text>
										</view>
									</view>
								</view>
							</swiper-item>

						</block>
					</swiper>
				</view>

				<view class="d-flex d-flex-center">
					<view class="wrap-item-btn d-flex d-flex-center d-flex-middle" @click="preSendGift">赠送</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="facePopup" @touchmove.stop.prevent="moveHandle" :mask-background-color="'rgba(0,0,0,0)'"
			type="bottom" style="position: relative;z-index: 999998;">
			<view class="wrap">
				<view class="wrap-hd d-flex d-flex-between d-flex-middle">
					<view class="d-flex">
						<view class="wrap-hd-send py-1 px-2 d-flex d-flex-middle mr-2" @click="ChangeEmotion(0)">
							<text class="font26 colorfff">全部表情</text>
						</view>
						<view class="wrap-hd-send py-1 px-2 d-flex d-flex-middle" @click="ChangeEmotion(1)">
							<text class="font26 colorfff">热门表情</text>
						</view>
					</view>
					<text class="iconfont icon-cuowu3 font30" style="color: rgba(255,255,255,.4);"
						@click="closeFace"></text>
				</view>
				<view class="wrap-bd mb-3">
					<view style="width: 742rpx;padding:20rpx 3rpx 10rpx" class="d-flex d-flex-wrap" v-show="EmotionIdx == 0">
						<view style="width: 106rpx;height: 70rpx;" class="d-flex d-flex-center"
							v-for="(face,findex) in faceList" :key="findex" @click="pickFace(face.value)">
							<text class="font32">{{face.value}}</text>
						</view>
					</view>
					<view style="width: 742rpx; padding:10rpx 3rpx 10rpx;" class="d-flex d-flex-wrap mb-1" v-show="EmotionIdx == 1":style="{height: (HotEmotionList.length / 5) * 142 + 20 + 'rpx'}">
						<view class="w-100 d-flex d-flex-wrap" :style="{height: (HotEmotionList.length / 5) * 142 + 'rpx'}">
							<view
								class="d-flex d-flex-column d-flex-center d-flex-middle" 
								style="width: 142rpx; height: 142rpx; margin-bottom: 8rpx;"
								:style="{marginRight: (idx + 1)%5==0? '0rpx' : '8rpx'}"
								v-for="(i, idx) in HotEmotionList" :key="i.id"
								@click="SendHotEmotion(i)"
							>
								<image :src="i.thumb.gif" mode="aspectFit" style="width: 142rpx; 142rpx"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="payPopup" @touchmove.stop.prevent="moveHandle" type="bottom"
			style="position: relative;z-index: 999991;">
			<view class="wrap" style="background-color: #ffffff;">
				<view class="px-3 py-3 d-flex d-flex-between d-flex-middle">
					<view class="d-flex d-flex-middle" style="width: 180rpx;">
						<text class="font24 color999">余额:</text>
						<text class="iconfont font24 icon-jinbi-yingbi-huobi-Coin mx-1" style="color: #FFCC00;"></text>
						<text class="font24 color999">{{$store.state.user.availableAmount || 0}}</text>
					</view>
					<text class="font30">礼物购买</text>
					<view class="d-flex d-flex-middle d-flex-end" style="width: 150rpx;"><text
							class="iconfont icon-cuowu3 font30 color999" @click="closePayPopup"></text></view>
				</view>
				<view class="wrap-bd mb-1">
					<view class="px-4 d-flex d-flex-column d-flex-middle">
						<image :src="PayGiftItem.icon" style="width: 200rpx; height: 200rpx;;"></image>
						<text class="font32 color999" v-if="payIndex==0 || payIndex==1">￥{{systemInfo.platform=='iOS'? PayGiftItem.iosPrice : PayGiftItem.androidPrice}}</text>
						<view class="d-flex d-flex-middle mt-1" v-else>
							<text class="iconfont font30 icon-jinbi-yingbi-huobi-Coin mx-1" style="color: #FFCC00;"></text>
							<text class="font32 color999">{{systemInfo.platform=='iOS'? PayGiftItem.iosCoinPrice : PayGiftItem.androidCoinPrice}}</text>
						</view>
					</view>
				</view>
				<view class="pb-4">
					<view class="d-flex d-flex-between d-flex-middle px-4 mb-5">
						<view class="d-flex d-flex-middle">
							<image class="rounded"
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%20554.png"
								style="width: 50rpx;height: 50rpx;"></image>
							<text class="ml-1">嗒币支付</text>
						</view>
						<text class="iconfont icon-xuanzhong font32"
							:class="payIndex == 2?'main-color':'colorhold'"></text>
					</view>

					<view class="px-5">
						<view style="height: 70rpx;border-radius: 50rpx;"
							class="bg-main d-flex d-flex-center d-flex-middle" @click="confirmPay"><text
								class="font30 colorfff">确认支付</text></view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="tipsPopup" type="top" :mask-background-color="'rgba(0,0,0,0)'"
			style="position: relative;z-index: 999997;">
			<view class="tips-popup">
				<view class="tips-content">
					<view class="d-flex d-flex-between" @click="closeTips">
						<text class="tips-title">{{tips_title}}</text>
						<text class="iconfont icon-cuo color71"></text>
					</view>
					<text class="tips-text">{{tips_content}}</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="giftChat" :mask-background-color="'rgba(0,0,0,.15)'"
			style="position: relative;z-index: 99999999999;">
			<view style="width: 540rpx;background-color: #ffffff;border-radius: 30rpx;padding: 45rpx 40rpx;">
				<view class="d-flex d-flex-center mb-2"><text class="color000 font32">今天有很多人找TA聊天啦</text></view>
				<view class="text-center mb-4">
					<text class="line-height40 color999">为了避免过度打扰TA，明天再来找TA或送个小礼物表达诚意开启聊天吧!</text>
				</view>
				<view class="d-flex d-flex-between mb-5">
					<view class="chat-gift d-flex d-flex-column d-flex-middle d-flex-center"
						:class="{'chat-gift-on':chatindex == 0}" @click="changeChatGift(0)">
						<image :src="chatGiftList[0].icon" mode="aspectFill" style="width: 110rpx;height: 110rpx;">
						</image>
						<text class="color000 my-1">{{chatGiftList[0].name}}</text>
						<text class="color999 font26">{{chatGiftList[0].androidCoinPrice}}嗒币</text>
					</view>
					<view class="chat-gift d-flex d-flex-column d-flex-middle d-flex-center"
						:class="{'chat-gift-on':chatindex == 1}" @click="changeChatGift(1)">
						<image :src="chatGiftList[1].icon" mode="aspectFill" style="width: 110rpx;height: 110rpx;">
						</image>
						<text class="color000 my-1">{{chatGiftList[1].name}}</text>
						<text class="color999 font26">{{chatGiftList[1].androidCoinPrice}}嗒币</text>
					</view>
					<view class="chat-gift d-flex d-flex-column d-flex-middle d-flex-center"
						:class="{'chat-gift-on':chatindex == 2}" @click="changeChatGift(2)">
						<image :src="chatGiftList[2].icon" mode="aspectFill" style="width: 110rpx;height: 110rpx;">
						</image>
						<text class="color000 my-1">{{chatGiftList[2].name}}</text>
						<text class="color999 font26">{{chatGiftList[2].androidCoinPrice}}嗒币</text>
					</view>
				</view>
				<view class="d-flex d-flex-center mb-3">
					<view style="width: 380rpx;height: 80rpx;background-color: #4397f2;border-radius: 50rpx;"
						class="d-flex d-flex-center d-flex-middle">
						<text class="font30 colorfff">送礼开启私聊</text>
					</view>
				</view>
				<view class="text-center">
					<text class="color000 mr">开通[小嗒超级会员]享受搭讪特权</text><text
						class="iconfont icon-youjiantou1 color000"></text>
				</view>
			</view>
			<view class="d-flex d-flex-center py-2" @click="closeGiftChat">
				<text class="iconfont icon-cuowu3 font40 colorfff"></text>
			</view>
		</uni-popup>
		<uni-popup ref="moneyPopup" type="dialog" style="position: relative;z-index: 999999;">
			<uni-popup-dialog cancelText="取消" confirmText="去购买" title="提示" content="当前礼物数量不足，购买后才可以继续送礼，是否去购买？"
				@confirm="confirmMoney" @close="colseMoneyPopup"></uni-popup-dialog>
		</uni-popup>
		<view style="position: absolute;width: 750rpx;height: 750rpx;z-index: 111;left: 0;bottom: 400rpx;"
			v-if="vsgaShow">
			<l-svga ref="svga"></l-svga>
		</view>
	</view>
</template>
<script>
	import md5 from 'js-md5';
	import store from '@/store/index.js';
	import { mapActions } from 'vuex'
	import pay from '@/mixins/pay.js';
	import { manner } from "@/util/manner.js";
	import { uploadImageApi } from '@/http/uploadImage.js';
	import { giftApi } from '@/http/giftApi.js';
	import { memberApi } from '../../http/memberApi';
	import { PayApi } from '../../http/PayApi';
	import { userApi } from '../../http/userApi';
	import { DaziApi } from '../../http/Dazi';
	import { otherApi } from '../../http/other';
	import { TaskApi } from '../../http/taskApi';
	export default {
		mixins: [pay],
		data() {
			return {
				isLoading: true,
				vsgaShow: false,
				focusState: true,
				tab: 0,
				ShowMemmberView: true,
				chatindex: 0,
				srcollViewHeight: 0,
				emotionBottom: 0,
				EmotionIdx: 0,
				srcollHeight: 0,
				showMore: false,
				firstMes: false,
				sentBtnStyly: "rgba(69, 199, 255, .7)",
				scrollIntoID: 'chatID_0',
				keyboardHeight: 0,
				safeBottom: 0,
				systemInfo: uni.getSystemInfoSync(),
				money: '',
				GameCardList: [],
				HotEmotionList: [],
				FirstMesEmotionList: [],
				PayGiftItem: {},
				// #ifdef MP-WEIXIN
				ButtonBounding: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				ButtonBounding: {
					height: 40
				},
				// #endif
				msg: '',
				firstPay: false,
				tips_title: '',
				tips_content: '',
				toItem: {
					id: '',
					name: '好友',
					avatar: '',
					conversationID: '',
					type: 'C2C'
				},
				voice: false,
				recorderManager: uni.getRecorderManager(),
				playVoiceAnimationIndex: '',
				onPlay: false,
				isVoice: false,
				voiceTis: '按住 说话',
				recordTis: "手指上滑 取消发送",
				recording: false,
				willStop: false,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				rechargeList: [],
				recordTimer: null,
				recordLength: 0,
				msgList: [],
				nextReqMessageID: '',
				isCompleted: false,
				IntimityVal: null,
				faceList: [{
						label: '哈哈',
						value: '😃'
					},
					{
						label: '嘿嘿',
						value: '😀'
					},
					{
						label: '大笑',
						value: '😄'
					},
					{
						label: '嘻嘻',
						value: '😁'
					},
					{
						label: '斜眼笑',
						value: '😆'
					},
					{
						label: '苦笑',
						value: '😅'
					},
					{
						label: '笑尿',
						value: '🤣'
					},
					{
						label: '笑哭',
						value: '😂'
					},
					{
						label: '呵呵',
						value: '🙂'
					},
					{
						label: '可爱',
						value: '😊'
					},
					{
						label: '天使',
						value: '😇'
					},
					{
						label: '花痴',
						value: '😍'
					},
					{
						label: '崇拜',
						value: '🤩'
					},
					{
						label: '飞吻',
						value: '😘'
					},
					{
						label: '亲亲',
						value: '😗'
					},
					{
						label: '好吃',
						value: '😋'
					},
					{
						label: '吐舌',
						value: '😛'
					},
					{
						label: '滑稽',
						value: '🤪'
					},
					{
						label: '安静',
						value: '🤫'
					},
					{
						label: '想一想',
						value: '🤔'
					},
					{
						label: '翻白眼',
						value: '🙄'
					},
					{
						label: '困',
						value: '😴'
					},
					{
						label: '呕吐',
						value: '🤮'
					},
					{
						label: '晕',
						value: '😵'
					},
					{
						label: '汗',
						value: '😓'
					},
					{
						label: '痛苦',
						value: '😣'
					},
					{
						label: '失望',
						value: '😞'
					},
					{
						label: '累',
						value: '😫'
					},
					{
						label: 'OK',
						value: '👌🏻'
					},
					{
						label: '摇滚',
						value: '🤘🏻'
					}
				],
				giftIndex: 0,
				orderNo: null,
				param: {},
				payParam: {},
				WxpayParams: {},
				isRequesting: false,
				orderStr: null,
				gift: {
					id: '1',
					name: '棒棒蛋糕',
					icon: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20241029150653-78516a42-0fab-4f9e-96fa-52db1495155a.png',
					svga: 'https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/svga/%E6%A3%92%E6%A3%92%E8%9B%8B%E7%B3%95.svga',
					price: 10
				},
				giftsList: [],
				emotionList: [],
				chatGiftList: [{
						"id": "1",
						"name": "棒棒蛋糕",
						"icon": "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20241029150653-78516a42-0fab-4f9e-96fa-52db1495155a.png",
						"type": 0,
						"svga": "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/svga/%E6%A3%92%E6%A3%92%E8%9B%8B%E7%B3%95.svga",
						"price": 100.00
					},
					{
						"id": "37",
						"name": "小风车",
						"icon": "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20250115151338-67e04dd3-1e63-4c22-8cb1-e70f79425c11.png",
						"type": 0,
						"svga": "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/svga/630%E6%A4%8B%E5%BA%A4%E6%BA%85.svga",
						"price": 10.00
					},
					{
						"id": "40",
						"name": "冰玫瑰",
						"icon": "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/gift/20250115151940-cc749d47-fde2-4c82-ba24-e660e71fbbfd.png",
						"type": 0,
						"svga": "https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/svga/D1623%E5%86%B0%E7%8E%AB%E7%91%B0.svga",
						"price": 50.00
					}
				],
				coinList: [{
						id: '1',
						num: 10,
						money: 1
					},
					{
						id: '2',
						num: 30,
						money: 3
					},
					{
						id: '3',
						num: 50,
						money: 5
					},
					{
						id: '4',
						num: 100,
						money: 10
					},
					{
						id: '5',
						num: 500,
						money: 50
					},
					{
						id: '6',
						num: 1000,
						money: 100
					}
				],
				coinIndex: 0,
				coinid: 1,
				device: true, //设备
				payIndex: 2
			}
		},
		onLoad(option) {
			let that = this
			that.queryDaCoinMemeber();
			that.toItem = JSON.parse(decodeURIComponent(option.to))
			that.QueryUserInfo()
			that.QueryGameCard()
			that.queryIntimityVal()
			that.recorderManager.onStart((e) => {
				that.recordBegin(e);
			})
			that.recorderManager.onStop((e) => {
				that.recordEnd(e);
			})
			uni.$on('im-page', data => {
				that.msgList.push(data.data)
				that.scrollBottom()
				if (data.data.payload.data && data.data.payload.data == 'GIFT') {
					if (that.vsgaShow) {
						return
					}
					that.vsgaShow = true
					setTimeout(() => {
						let svgaFile = JSON.parse(data.data.payload.extension).svga
						that.$refs.svga.render(async (parser, player) => {
							const videoItem = await parser.load(svgaFile)
							await player.setVideoItem(videoItem)
							player.loops = 1
							player.startAnimation()
							player.onFinished(() => {
								that.vsgaShow = false
							})
						})
					}, 500)

				}
			})
		},
		onShow() {
			let that = this
			uni.onKeyboardHeightChange(res => {
				// #ifndef APP
				that.keyboardHeight = res.height
				// #endif
				if (res.height == 0) {
					that.srcollHeight = that.systemInfo.screenHeight - that.systemInfo.statusBarHeight - that.ButtonBounding.height - 180 + 22
					that.setScrollHeight()
				} else {
					that.srcollHeight = that.systemInfo.screenHeight - that.systemInfo.statusBarHeight - that.ButtonBounding.height - 180 - res.height + 22
					that.srcollViewHeight = that.srcollViewHeight - res.height
				}
				this.scrollIntoID = 'chatId_' + (this.msgList.length - 2);
				that.scrollBottom();
			})
		},
		onReady() {
			this.getMessageList()
			this.$nextTick(() => {
				this.getGiftList()
				this.setScrollHeight()
				// this.checkShowGiftChat()
			})
		},
		onHide() {
			uni.offKeyboardHeightChange(res => {});
		},
		methods: {
			...mapActions('permissionToast', ['requstPermission']),
			setScrollHeight() {
				let element = "#footer-wrap";
				const query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect().exec((res) => {
					if (res && res[0]) {
						if(this.$store.state.user.accountType==1 && this.toItem.id != 111 && this.ShowMemmberView) {
							this.srcollViewHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - this.ButtonBounding.height - res[0].height - 22 - 40;
						} else {
							this.srcollViewHeight = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - this.ButtonBounding.height - res[0].height - 22;
						}
						this.emotionBottom = res[0].height
					}
				});
			},
			async GetFirstMesEmotionList() {
				const openId = '1742539429';
				const secret = 'e554478d12fbf19b31cf6908f900c427';
				const timestamp = Date.now ();
				let str = openId + '#' + secret + '#' + timestamp
				const sign = md5(str).toUpperCase();
				
				let params = {
					openid: openId,
					timestamp: timestamp,
					sign: sign,
					keyword: '你好',
					limit: 12
				}
				const res = await otherApi.GetEmoticon(params)
				this.FirstMesEmotionList = res.data.data
				console.log(this.FirstMesEmotionList)
			},
			async getEmoticon() {
				const openId = '1742539429';
				const secret = 'e554478d12fbf19b31cf6908f900c427';
				const timestamp = Date.now ();
				let str = openId + '#' + secret + '#' + timestamp
				const sign = md5(str).toUpperCase();
				
				let params = {
					openid: openId,
					timestamp: timestamp,
					sign: sign,
					keyword: this.msg,
					limit: 10
				}
				const res = await otherApi.GetEmoticon(params)
				this.emotionList = res.data.data
				console.log(this.emotionList);
			},
			checkShowGiftChat() {
				let that = this
				this.$refs.giftChat.open();
			},
			changeChatGift(chatIndex) {
				this.chatindex = chatIndex
			},
			ChangeEmotion(idx) {
				this.EmotionIdx = idx
				if(idx == 1) {
					this.GetHotEmotion()
				}
			},
			async GetHotEmotion() {
				const openId = '1742539429';
				const secret = 'e554478d12fbf19b31cf6908f900c427';
				const timestamp = Date.now ();
				let str = openId + '#' + secret + '#' + timestamp
				const sign = md5(str).toUpperCase();
				
				let params = {
					openid: openId,
					timestamp: timestamp,
					sign: sign,
					limit: 24
				}
				const res = await otherApi.GetHotEmotion(params)
				this.HotEmotionList = res.data.data
				console.log(this.HotEmotionList);
			},
			async QueryUserInfo() {
				if(this.toItem.id == 111) return
				let res = await userApi.getUser({
					id: this.toItem.id ? this.toItem.id : this.toItem.userUid
				})
				this.toItem.signature = res.signature
				return res
			},
			async QueryGameCard() {
				if(this.toItem.id == 111) return
				let res = await DaziApi.queryCard({
					uid: this.toItem.id ? this.toItem.id : this.toItem.userUid,
					status: 1
				})
				res.records.forEach(i => {
					if (this.GameCardList.length >= 3) return
					this.GameCardList.push(i.gameName)
				})
			},
			touser() {
				let uid = this.toItem.id ? this.toItem.id : this.toItem.userUid
				if (uid == this.$store.state.user.uid) {
					uni.switchTab({
						url: `/pages/user/user`
					});
				} else {
					uni.navigateTo({
						url: `/pagesMain/HomePage/HomePage?id=${uid}`
					});
				}
			},
			// 判断是否已经拉黑
			async getRelation() {
				let params = {
					type: 6,
					pageIndex: 1,
					pageSize: 100
				}
				let res = await userApi.getRelation(params)
				let toUid = this.toItem.id ? this.toItem.id : this.toItem.userUid
				let flag = false
				res.records.forEach(item => {
					if (item.fromUid == store.state.user.uid && item.toUid == toUid) {
						flag = true
						return
					}
				})
				return flag
			},
			async Block() {
				try {
					const relationExists = await this.getRelation();
					if (!relationExists) {
						uni.showLoading({
							mask: 'true',
							title: '拉黑中...'
						});
						let params = {
							bindFlag: 1,
							fromUid: store.state.user.uid,
							toUid: this.toItem.id ? this.toItem.id : this.toItem.userUid,
							type: 6
						};
						let res = await userApi.relation(params);
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '拉黑成功!',
							duration: 1500
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '已拉黑该用户',
							duration: 1500
						});
					}
				} catch (error) {
					console.error('An error:', error);
				}
			},
			gotoReportPage() {
				uni.showLoading({
					icon: 'none',
					title: '加载中...'
				})
				this.QueryUserInfo().then(res => {
					uni.hideLoading()
					uni.navigateTo({
						url: "/pagesMain/ReportPage/ReportPage?type=4&idRef=" + res.id + '&uid=' + res.uid
					})
				})
			},
			async showGiftChat() {
				let res = await giftApi.chatGift({

				})
			},
			closeGiftChat() {
				uni.navigateBack()
				this.$refs.giftChat.close();
			},
			async queryDaCoinMemeber() {
				const res = await memberApi.DaCoinMember()
				this.rechargeList = res.records
				// console.log(this.systemInfo.platform);
			},
			async confirmMoney() {
				this.$refs.moneyPopup.close()
				this.closeGift()
				this.PayGiftItem = this.giftsList[parseInt(this.giftIndex / 8)][this.giftIndex % 8]
				console.log(this.PayGiftItem);
				this.$refs.payPopup.open()
			},
			colseMoneyPopup() {
				this.$refs.moneyPopup.close()
			},
			closePayPopup() {
				this.$refs.payPopup.close()
			},
			split_array(arr, len) {
				var a_len = arr.length;
				var result = [];
				for (var i = 0; i < a_len; i += len) {
					result.push(arr.slice(i, i + len))
				}
				return result
			},
			async getGiftList() {
				let that = this
				let params = {
					pageIndex: 1,
					pageSize: 20
				}
				let res = await giftApi.sendGiftList(params)
				if (res.records && res.records.length > 0) {
					that.giftsList = that.split_array(res.records, 8)
					that.gift = that.giftsList[0][0]
				}
			},
			playAudio: function(data, index) {
				this.playVoiceAnimationIndex = '';
				// this.innerAudioContext.src = '';
				const innerAudioContext = uni.createInnerAudioContext();
				try {
					if (this.onPlay) {
						// this.innerAudioContext.stop();
						innerAudioContext.stop()
						this.onPlay = false;
						this.playVoiceAnimationIndex = '';
					} else {
						innerAudioContext.src = JSON.parse(data.payload.extension).url;
						innerAudioContext.play();
						this.playVoiceAnimationIndex = index;
						this.onPlay = true;
						innerAudioContext.onPlay(() => {
							console.log('开始播放');
						});
						innerAudioContext.onEnded(() => {
							console.log('自然播放结束');
							this.onPlay = false;
							this.playVoiceAnimationIndex = '';
						});
						innerAudioContext.onStop(() => {
							console.log('onStop');
							this.onPlay = false;
							this.playVoiceAnimationIndex = '';
						});
						innerAudioContext.onError((res) => {
							console.log(res.errMsg);
							console.log(res.errCode);
							this.onPlay = false;
							this.playVoiceAnimationIndex = '';
						});
					}
				} catch (err) {
					console.log(err)
					this.onPlay = false;
					this.playVoiceAnimationIndex = '';
				}
			},
			changeVoice() {
				this.voice = !this.voice
			},
			async voiceBegin(e) {
				if (e.touches.length > 1) {
					return;
				}
				this.initPoint.Y = e.touches[0].pageY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.recorderManager.start({
					format: 'mp3'
				});
			},
			//录音开始UI效果
			recordBegin: function(e) {
				this.recording = true;
				this.voiceTis = '松开 结束';
				this.recordLength = 0;
				this.recordTimer = setInterval(() => {
					this.recordLength++;
				}, 1000)
			},
			voiceIng: function(e) {
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				if (this.initPoint.Y - touche.pageY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送'
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送'
				}
			},
			voiceCancel: function() {
				uni.hideLoading();
				this.recording = false
				this.voiceTis = '按住 说话'
				this.recordTis = '手指上滑 取消发送'
				this.willStop = true; //不发送录音
				this.recorderManager.stop(); //录音结束
			},
			voiceEnd: function(e) {
				if (!this.recording) {
					return;
				}
				uni.hideLoading();
				this.recording = false;
				this.voiceTis = '按住 说话'
				this.recordTis = '手指上滑 取消发送'
				this.recorderManager.stop(); //录音结束
			},
			//录音结束(回调文件)
			recordEnd: function(e) {
				clearInterval(this.recordTimer);
				if (!this.willStop) {
					this.uploadAudio(e.tempFilePath);
					console.log('auio..', e.tempFilePath)
				} else {
					console.log('取消发送录音', e);
				}
				this.willStop = false;
			},
			uploadAudio: async function(file) {
				console.log('start audio')
				let res = await uploadImageApi.Upload(file)
				console.log('res', res)
				if (res.data) {
					console.log('音频地址', res.data)
					this.sendAudio(res.data)
				} else {
					uni.showToast({
						title: '上传失败，请稍后再试',
						icon: 'none'
					})
				}
			},
			sendAudio: function(file) {
				let that = this
				let imgMessage = that.$tim.createCustomMessage({
					to: that.toItem.id ? that.toItem.id : that.toItem.userUid,
					conversationType: 'C2C',
					payload: {
						data: 'audio',
						description: '语音消息',
						extension: JSON.stringify({
							'url': file,
							'duration': that.recordLength
						})
					}
				})
				that.$tim.sendMessage(imgMessage).then((imResponse) => {
					if (imResponse.code == 0) {
						that.msgList.push(imResponse.data.message);
						that.msg = '';
						that.AddIntimityVal(1)
						that.scrollBottom();
					}
				})
			},
			TopChat() {
				let that = this
				let promise = that.$tim.pinConversation({ conversationID: that.toItem.conversationID, isPinned: true });
				promise.then(function(imResponse) {
					// 置顶会话成功
					const { conversationID } = imResponse.data; // 被置顶的会话 ID
					uni.showToast({
						icon: 'none',
						title: '置顶成功!',
						position: 'bottom',
						duration: 1500
					})
				}).catch(function(imError) {
				  const { code } = imError;
				  // code - 50002 会话 ID 无效
				  console.warn('pinConversation error:', imError); // 置顶会话失败的相关信息
				});
			},
			openGift() {
				if (this.vsgaShow == false) {
					this.$refs.giftPopup.open()
					this.firstPay = false
					this.vsgaShow = true
				} else {
					uni.showToast({
						title: '礼物发送中...',
						icon: 'none'
					})
				}
			},
			closeGift() {
				this.$refs.giftPopup.close()
				this.vsgaShow = false
			},
			openFace() {
				this.$refs.facePopup.open()
			},
			openTips() {
				this.tips_title = '麦克风权限申请说明';
				this.tips_content = '允许应用访问您的麦克风权限来方便用户发送语音。';
				this.$refs.tipsPopup.open();
			},
			closeFace() {
				this.$refs.facePopup.close()
			},
			closeTips() {
				this.$refs.tipsPopup.close()
			},
			pickGift(ff, ll) {
				this.giftIndex = ff * 8 + ll
				this.gift = this.giftsList[ff][ll]
			},
			pickFace(val) {
				this.msg += val;
				this.$refs.facePopup.close()
			},
			moveHandle() {
				return false
			},
			payOne() {
				let that = this
				that.firstPay = true
				that.closeGift()
				that.$refs.payPopup.open()
			},
			send() {

			},
			async chooseImage() {

				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							this.uploadImage(res.tempFilePaths[i]);
						}
					}
				});
			},
			async caputerImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera'],
					success: (res) => {
						this.uploadImage(res.tempFilePaths[0]);
					}
				});
			},
			SendEmotion(item, type) {
				if(type == 'FirstSend') {
					this.sendImage(item.origin.gif);
					this.firstMes = false
					this.FirstMesEmotionList = []
				} else {
					this.sendImage(item.origin.gif);
					this.emotionList = []
				}
			},
			SendHotEmotion(item) {
				this.sendImage(item.origin.gif);
				this.closeFace()
			},
			async uploadImage(files) {
				let res = await uploadImageApi.Upload(files)
				if (res.data) {
					this.sendImage(res.data)
				} else {
					uni.showToast({
						title: '图片上传失败',
						icon: 'none'
					})
				}
			},
			sendImage(file) {
				let that = this
				let imgMessage = that.$tim.createCustomMessage({
					to: that.toItem.id ? that.toItem.id : that.toItem.userUid,
					conversationType: 'C2C',
					payload: {
						data: 'image',
						description: '图片消息',
						extension: file
					}
				})
				that.$tim.sendMessage(imgMessage).then((imResponse) => {
					if (imResponse.code == 0) {
						that.msgList.push(imResponse.data.message);
						that.msg = '';
						that.AddIntimityVal(1)
						that.scrollBottom();
					}
				})
			},
			gotoMemberPage() {
				uni.navigateTo({
					url: '/pagesMain/member/member'
				})
			},
			CloseMemmberView() {
				this.ShowMemmberView = false
				this.setScrollHeight()
			},
			preSendGift() {
				let that = this
				that.sentGIft()
				// if(store.state.user.availableAmount < that.gift.price){
				// 	that.$refs.moneyPopup.open()
				// }else{
				// 	that.sentGIft()
				// }
			},
			sendGift() {
				let that = this
				that.$refs.giftPopup.close()
				let message = that.$tim.createCustomMessage({
					to: that.toItem.id ? that.toItem.id : that.toItem.userUid,
					conversationType: 'C2C',
					payload: {
						data: 'GIFT',
						description: '送给' + that.toItem.name + ' ' + that.gift.name,
						extension: JSON.stringify(that.gift)
					}
				})
				that.$tim.sendMessage(message).then((imResponse) => {
					if (imResponse.code == 0) {
						that.msgList.push(imResponse.data.message);
						that.msg = '';
						that.scrollBottom();
					}
				})
				that.$refs.svga.render(async (parser, player) => {
					const videoItem = await parser.load(that.gift.svga)
					await player.setVideoItem(videoItem)
					player.loops = 1
					player.startAnimation()
					player.onFinished(() => {
						that.vsgaShow = false
					})
				})
			},
			playGift(svga) {
				let that = this
				if (that.vsgaShow) {
					return
				}
				that.vsgaShow = true
				setTimeout(() => {
					that.$refs.svga.render(async (parser, player) => {
						const videoItem = await parser.load(svga)
						await player.setVideoItem(videoItem)
						player.loops = 1
						player.startAnimation()
						player.onFinished(() => {
							that.vsgaShow = false
						})
					})
				}, 500)
			},
			async sentGIft() {
				let that = this
				try {
					if (!this.giftsList[parseInt(this.giftIndex / 8)][this.giftIndex % 8].count) {
						this.$refs.moneyPopup.open()
					} else {
						await giftApi.sendGift({
							'toUid': that.toItem.id ? that.toItem.id : that.toItem.userUid,
							'giftId': that.gift.id
						})
						that.sendGift()
						this.giftsList[parseInt(this.giftIndex / 8)][this.giftIndex % 8].count--
						store.commit('setCoin', {
							'operate': false,
							'num': that.gift.price
						})
					}
				} catch (error) {
					if (error.state == 200089) {
						this.$refs.moneyPopup.open()
					} else {
						uni.showToast({
							title: error.msg,
							icon: 'none'
						})
					}
				}
			},
			scrollBottom: function() {
				this.$nextTick(() => {
					this.scrollIntoID = 'chatId_' + (this.msgList.length - 1);
				});
			},
			goBack() {
				manner.goBack()
			},
			oninput(e) {
				if (e.detail.value != "") {
					this.sentBtnStyly = "rgba(69, 199, 255, 1)"
					this.getEmoticon()
				} else {
					this.sentBtnStyly = "rgba(69, 199, 255, .7)"
					this.emotionList = []
				}
			},
			inputMsg(e) {},
			inputFocus() {},
			inputBlur() {

			},
			linechange() {

			},
			getMessageList() {
				let that = this
				if (that.isCompleted) {
					return
				}
				uni.showLoading({
					title: '加载中...'
				})
				that.$tim.getMessageList({
					conversationID: that.toItem.conversationID,
					nextReqMessageID: that.nextReqMessageID,
					count: 15,
					direction: 0
				}).then((imResponse) => {
					uni.hideLoading()
					if (that.nextReqMessageID == '') {
						that.msgList = []
						that.msgList = imResponse.data.messageList
						that.msgList.forEach(item => {
							if(item.from == that.$store.state.user.uid) {
								that.firstMes = true
								return
							}
						})
						if(!that.firstMes) {
							that.GetFirstMesEmotionList()
						}
						setTimeout(() => {
							that.isLoading = false
						}, 1000)
						that.scrollBottom()
					} else {
						that.msgList = imResponse.data.messageList.concat(that.msgList)
					}
					that.nextReqMessageID = imResponse.data.nextReqMessageID;
					that.isCompleted = imResponse.data.isCompleted;
				}).catch((imError) => {
					uni.hideLoading()
					console.log('imError', imError)
				})
			},
			sendMessage() {
				let that = this
				if (that.msg != '') {
					let message = that.$tim.createTextMessage({
						to: that.toItem.id ? that.toItem.id : that.toItem.userUid,
						conversationType: that.toItem.type,
						payload: {
							text: that.msg
						}
					})
					that.$tim.sendMessage(message).then((imResponse) => {
						if (imResponse.code == 0) {
							that.msgList.push(imResponse.data.message);
							that.msg = '';
							this.emotionList = []
							setTimeout(() => {
								that.scrollBottom();
								that.AddIntimityVal(1)
							}, 500)
						}
					})
				}
			},
			preview(imgurl, cur) {
				uni.previewImage({
					urls: [imgurl],
					current: cur
				});
			},
			changCoin(id, iii) {
				this.coinid = id;
				this.coinIndex = iii
			},
			// 创建订单
			async createOrder(param) {
				let res = await PayApi.BuyGifts(param);
				this.orderNo = res.orderNo;
			},
			// 支付单
			async createPay(param) {
				let res = await PayApi.Pay(param);
				// 支付宝支付
				if (this.payParam.payMethod === 3) {
					this.orderStr = res.params.orderStr
					console.log('支付宝支付');
					this.payByAlipay();
					return
				}
				// 微信支付
				if (this.payParam.payMethod === 2) {
					this.WxpayParams = {}
					this.WxpayParams = res.params
					console.log('微信支付');
					this.payByWxpay();
					return
				}
				// 嗒币支付
				if (this.payParam.payMethod === 1) {
					console.log(res.paySuccess);
					this.$refs.payPopup.close()
					if (res.paySuccess) {
						uni.showToast({
							title: '购买成功',
							icon: 'none',
							duration: 1500
						});
						uni.showLoading({
							icon: 'none',
							title: '加载中...'
						})
						setTimeout(() => {
							this.getGiftList()
							uni.hideLoading()
							this.$refs.giftPopup.open()
						}, 2500)
					}
				}
			},
			// 微信支付
			payByWxpay() {
				let that = this
				uni.requestPayment({
					"provider": "wxpay", // 微信支付
					"orderInfo": {
						"appid": that.WxpayParams.appid,
						"timestamp": that.WxpayParams.timestamp,
						"noncestr": that.WxpayParams.noncestr,
						"package": "Sign=WXPay",
						"partnerid": that.WxpayParams.partnerId,
						"prepayid": that.WxpayParams.prepayId,
						"sign": that.WxpayParams.sign
					},
					success: (res) => {
						console.log('支付成功', res);
						// 支付成功的处理逻辑
						that.$refs.payPopup.close()
						uni.showToast({
							title: '支付成功',
							icon: 'none',
							position: 'bottom',
							duration: 1500
						});
						uni.showLoading({
							icon: 'none',
							title: '加载中...'
						})
						setTimeout(() => {
							this.getGiftList()
							uni.hideLoading()
							this.$refs.giftPopup.open()
						}, 2500)
					},
					fail: (err) => {
						console.log('支付失败，错误信息：', err);
						if (err.errCode === 'xxx') {
							// 可以根据不同的 errCode 进行不同的处理，这里的 xxx 是具体的错误码，例如用户取消支付的错误码
							console.log('用户取消支付');
						} else if (err.errCode === 'yyy') {
							// 另一种错误码 yyy 的处理
							console.log('签名错误，请联系客服');
						} else {
							console.log('其他支付错误，请重试或联系客服');
						}
						uni.showToast({
							title: '支付失败',
							icon: 'none',
							position: 'bottom',
							duration: 2000
						});
					}
				});
			},
			// 支付宝支付
			payByAlipay() {
				const orderStr = this.orderStr;
				if (!orderStr) {
					console.error('订单字符串为空，无法进行支付');
					return;
				}
				// 调用 uni.requestPayment 方法
				uni.requestPayment({
					provider: 'alipay', // 指定支付提供商为支付宝
					orderInfo: orderStr, // 订单信息
					success: (res) => {
						console.log('支付成功:', res);
						this.$refs.payPopup.close()
						uni.showToast({
							title: '支付成功',
							icon: 'none',
							position: 'bottom',
							duration: 1500
						});
						uni.showLoading({
							icon: 'none',
							title: '加载中...'
						})
						setTimeout(() => {
							this.getGiftList()
							uni.hideLoading()
							this.$refs.giftPopup.open()
						}, 2500)
					},
					fail: (err) => {
						console.error('支付失败:', err);
						uni.showToast({
							title: '支付失败',
							icon: 'none', // 使用'none'图标，只显示文字
							duration: 1000 // 显示持续时间
						});
					}
				});
			},
			// 0,微信支付，1支付宝, 2嗒币
			changePay(iii) {
				this.payIndex = iii
				console.log(this.PayGiftItem);
			},
			confirmPay() {
				if (this.isRequesting) {
					uni.showToast({
						title:'请不要重复发送请求！',
						icon:'none'
					})
					console.log("请求已在处理中，5秒内不再重复发送请求。");
					return;
				}
				this.param.count = 1
				this.param.id = this.PayGiftItem.id;
				this.param.sourceType = this.device ? '1' : '2';
				this.isRequesting = true;

				this.createOrder(this.param).then(() => {
					this.payParam.orderNo = this.orderNo;
					this.payParam.payMethod = this.payIndex == 0 ? 2 : this.payIndex == 1 ? 3 :
					1; //0-wx,1-zfb，2-余额
					this.payParam.payType = this.payIndex == 2 ? 1 : 2;
					this.createPay(this.payParam);
				});
				setTimeout(() => {
					this.isRequesting = false;
				}, 5000);
			},
			showMorePopup() {
				this.showMore = !this.showMore
			},
			async queryIntimityVal() {
				if(this.toItem.id == 111) return
				let params = {
					relateUid: this.toItem.id ? this.toItem.id : this.toItem.userUid
				}
				let res = await DaziApi.queryIntimityVal(params)
				
				if(res>=0 && res<30) {
					this.IntimityVal = 0
				} else if(res>=30 && res<80) {
					this.IntimityVal = 1
				} else if(res>=80 && res<200) {
					this.IntimityVal = 2
				} else if(res>=200 && res<500) {
					this.IntimityVal = 3
				} else if(res>=500 && res<1300) {
					this.IntimityVal = 4
				} else if(res>=1300 && res<2600) {
					this.IntimityVal = 5
				} else if(res>=2600 && res<8000) {
					this.IntimityVal = 6
				} else if(res>=8000 && res<16000) {
					this.IntimityVal = 7
				} else if(res>=16000 && res<12000) {
					this.IntimityVal = 8
				} else if(res >= 12000) {
					this.IntimityVal = 9
				} else {
					this.IntimityVal = 0
				}
				
				console.log(this.IntimityVal);
			},
			async AddIntimityVal(intimity) {
				let params = {
					toUid: this.toItem.id ? this.toItem.id : this.toItem.userUid,
					intimity: intimity
				}
				await DaziApi.AddIntimityVal(params).then(() => {
					setTimeout(() => {
						this.queryIntimityVal()
					}, 500)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.scroll-view {
		width: 750rpx;
		padding: 10rpx 0
	}

	.l-txt {
		border-width: 1px;
		box-sizing: border-box;
		color: #000;
		font-size: 24rpx;
		padding: 8px 15px;
		position: relative;
	}

	.l-txt-l {
		background-color: #fff;
		border-radius: 0 12px 12px;
	}

	.l-txt-r {
		background-color: rgb(149, 236, 105);
		border-radius: 12px 0 12px 12px
	}

	.ai-item {
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		margin-right: 20rpx;
		color: #696989;
		background-color: #f6f7f9;
	}

	.ai-item-on {
		background-color: #fff7e6;
		color: #ff992a
	}

	.copy-item {
		width: 480rpx;
		border-radius: 10rpx;
		height: 56rpx;
		border: #dddddd solid 1px;
		margin-bottom: 10rpx;
		font-size: 24rpx;
	}

	.footer-wrap {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ffffff;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
	}

	.ft-area {
		height: 70rpx;
		line-height: 70rpx;
		width: 450rpx;
		margin: 0;
		padding-left: 30rpx;
		padding-right: 30rpx;
		border-radius: 50rpx;
		border: solid 1px #eee;
	}

	.wrap {
		width: 750rpx;
		font-size: 26rpx;
		background-color: #2d2e40;
		border-radius: 30rpx 30rpx 0 0;
		padding-bottom: 30rpx;
	}

	.wrap-hd {
		border-bottom: solid 1px #434456;
		padding: 20rpx;
	}

	.wrap-hd-send {
		border-radius: 30rpx;
		background-color: #3c374b;
	}

	.wrap-bd {
		min-height: 300rpx;
		padding: 10rpx 1rpx;
	}

	.wrap-item {
		width: 170rpx;
		height: 208rpx;
		border-style: solid;
		border-width: 1px;
		border-color: #2d2e40;
		border-radius: 20rpx;
		margin-left: 10rpx;
	}

	.wrap-item-on {
		border-color: #e5d98f;
	}

	.wrap-item-btn {
		background-color: #fae268;
		border-radius: 30rpx;
		padding: 10rpx 35rpx;
		color: #250e00;
	}

	.tips-popup {
		width: 690rpx;
		margin: 200rpx 30rpx 50rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		border: 1rpx solid #dddddd;
	}

	.tips-content {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	.tips-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #111111;
		line-height: 48rpx;
	}

	.tips-text {
		font-size: 28rpx;
		color: #333333;
		line-height: 48rpx;
	}

	.ing {
		width: 350rpx;
		top: 50rpx;
		position: absolute;
		text-align: center;
		justify-content: center;
		align-items: center;
	}

	.record {
		position: fixed;
		bottom: 320rpx;
		width: 350rpx;
		left: 200rpx;
		height: 350rpx;
		background-color: #4c4c4c;
		border-radius: 20rpx;
		justify-content: center;
		align-items: center;
	}

	.recording {
		width: 150rpx;
		height: 150rpx;
	}

	.recordTis {
		width: 350rpx;
		bottom: 50rpx;
		position: absolute;
		text-align: center;
		justify-content: center;
	}

	.recordTis-text {
		color: white;
		font-size: 30rpx;
	}

	.message-content-voice {
		padding-left: 30rpx;
		padding-right: 30rpx;
		height: 80rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.message-voice-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.message-voice-text {
		color: #333333;
	}

	.coin {
		width: 240rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		height: 100rpx;
		background-color: #f3f4f9;
		border: solid 1px #f3f4f9;
		border-radius: 30rpx;
		margin-bottom: 16rpx;
	}

	.coin-bdr {
		border-color: #f064cf;
	}

	.changeNike {
		padding: 40rpx 60rpx 0;
		color: #1f1f1f;

		input {
			box-sizing: border-box;
			border-radius: 10rpx;
			color: #333333;
			font-size: 26rpx;
			width: 100%;
			margin-top: 50rpx;
			height: 70rpx;
			padding-left: 20rpx;
			background-color: #efefef;
		}

		.desc {
			margin-top: 20rpx;
			font-size: 22rpx;
			color: #888888;
		}

		.btn {
			bottom: 0;
			left: 0;
			width: 100%;
			height: 90rpx;
			border-top: 1px solid #ededed;
		}

		.cancle {
			color: #9E9D9D;
		}

		.confirm {
			color: #66CCCC;
		}
	}

	.chat-gift {
		width: 154rpx;
		height: 230rpx;
		border: solid 1px #ededed;
		border-radius: 30rpx;
	}

	.chat-gift-on {
		border-color: #22baeb;
	}

	.gift-type-on {
		background-color: #ff4462;
	}

	.hexagon {
		position: relative;
		width: 100rpx;
		height: 115rpx;
		background-color: #fda4e3;
		clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
		overflow: hidden;
		perspective: 1000px;
		transform-style: preserve-3d;
	}

	.ripple {
		position: absolute;
		bottom: -10rpx;
		left: -60%;
		width: 220%;
		height: 100%;
		transform-origin: 50% 100%;
		animation-iteration-count: infinite;
	}

	.ripple-1 {
		background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 80%);
		animation: rippleAnimation1 6s infinite;
		animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
		z-index: 4;
	}

	.ripple-2 {
		background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
		animation: rippleAnimation2 7s infinite reverse;
		animation-timing-function: cubic-bezier(0.33, 0.1, 0.68, 0.8);
		z-index: 3;
		transform: translateZ(-10px);
	}

	.ripple-3 {
		background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%);
		animation: rippleAnimation3 8s infinite;
		animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
		z-index: 2;
		transform: translateZ(-20px);
	}

	.ripple-4 {
		background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%);
		animation: rippleAnimation4 9s infinite reverse;
		animation-timing-function: cubic-bezier(0.5, 0.1, 0.5, 0.9);
		z-index: 1;
		transform: translateZ(-30px);
	}

	@keyframes rippleAnimation1 {
		0% {
			transform: translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleY(0.3) skewX(0deg);
			opacity: 0.9;
			filter: blur(2px);
		}

		10% {
			transform: translateX(-10%) rotateX(3deg) rotateY(-3deg) rotateZ(8deg) scaleY(0.4) skewX(-8deg);
			opacity: 0.8;
			filter: blur(1.8px);
		}

		20% {
			transform: translateX(-20%) rotateX(6deg) rotateY(-6deg) rotateZ(15deg) scaleY(0.6) skewX(-15deg);
			opacity: 0.7;
			filter: blur(1.6px);
		}

		30% {
			transform: translateX(-25%) rotateX(9deg) rotateY(-9deg) rotateZ(20deg) scaleY(0.8) skewX(-20deg);
			opacity: 0.6;
			filter: blur(1.4px);
		}

		40% {
			transform: translateX(-22%) rotateX(7deg) rotateY(-7deg) rotateZ(17deg) scaleY(0.7) skewX(-17deg);
			opacity: 0.65;
			filter: blur(1.2px);
		}

		50% {
			transform: translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleY(0.3) skewX(0deg);
			opacity: 0.9;
			filter: blur(2px);
			transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}

		60% {
			transform: translateX(22%) rotateX(-7deg) rotateY(7deg) rotateZ(-17deg) scaleY(0.7) skewX(17deg);
			opacity: 0.65;
			filter: blur(1.2px);
		}

		70% {
			transform: translateX(25%) rotateX(-9deg) rotateY(9deg) rotateZ(-20deg) scaleY(0.8) skewX(20deg);
			opacity: 0.6;
			filter: blur(1.4px);
		}

		80% {
			transform: translateX(20%) rotateX(-6deg) rotateY(6deg) rotateZ(-15deg) scaleY(0.6) skewX(15deg);
			opacity: 0.7;
			filter: blur(1.6px);
		}

		90% {
			transform: translateX(10%) rotateX(-3deg) rotateY(3deg) rotateZ(-8deg) scaleY(0.4) skewX(8deg);
			opacity: 0.8;
			filter: blur(1.8px);
		}

		100% {
			transform: translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleY(0.3) skewX(0deg);
			opacity: 0.9;
			filter: blur(2px);
		}
	}

	@keyframes rippleAnimation2 {
		0% {
			transform: translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleY(0.2) skewX(0deg) translateZ(-10px);
			opacity: 0.8;
			filter: blur(3px);
		}

		10% {
			transform: translateX(8%) rotateX(-2deg) rotateY(2deg) rotateZ(-6deg) scaleY(0.3) skewX(6deg) translateZ(-10px);
			opacity: 0.7;
			filter: blur(2.8px);
		}

		20% {
			transform: translateX(16%) rotateX(-4deg) rotateY(4deg) rotateZ(-12deg) scaleY(0.5) skewX(12deg) translateZ(-10px);
			opacity: 0.6;
			filter: blur(2.6px);
		}

		30% {
			transform: translateX(20%) rotateX(-6deg) rotateY(6deg) rotateZ(-15deg) scaleY(0.6) skewX(15deg) translateZ(-10px);
			opacity: 0.5;
			filter: blur(2.4px);
		}

		40% {
			transform: translateX(18%) rotateX(-5deg) rotateY(5deg) rotateZ(-13deg) scaleY(0.55) skewX(13deg) translateZ(-10px);
			opacity: 0.55;
			filter: blur(2.2px);
		}

		50% {
			transform: translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleY(0.2) skewX(0deg) translateZ(-10px);
			opacity: 0.8;
			filter: blur(3px);
			transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}

		60% {
			transform: translateX(-18%) rotateX(5deg) rotateY(-5deg) rotateZ(13deg) scaleY(0.55) skewX(-13deg) translateZ(-10px);
			opacity: 0.55;
			filter: blur(2.2px);
		}

		70% {
			transform: translateX(-20%) rotateX(6deg) rotateY(-6deg) rotateZ(15deg) scaleY(0.6) skewX(-15deg) translateZ(-10px);
			opacity: 0.5;
			filter: blur(2.4px);
		}

		80% {
			transform: translateX(-16%) rotateX(4deg) rotateY(-4deg) rotateZ(12deg) scaleY(0.5) skewX(-12deg) translateZ(-10px);
			opacity: 0.6;
			filter: blur(2.6px);
		}

		90% {
			transform: translateX(-8%) rotateX(2deg) rotateY(-2deg) rotateZ(6deg) scaleY(0.3) skewX(-6deg) translateZ(-10px);
			opacity: 0.7;
			filter: blur(2.8px);
		}

		100% {
			transform: translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleY(0.2) skewX(0deg) translateZ(-10px);
			opacity: 0.8;
			filter: blur(3px);
		}
	}

	@keyframes rippleAnimation3 {
		0% {
			transform: translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleY(0.15) skewX(0deg) translateZ(-20px);
			opacity: 0.7;
			filter: blur(4px);
		}

		10% {
			transform: translateX(6%) rotateX(-1deg) rotateY(1deg) rotateZ(-4deg) scaleY(0.2) skewX(4deg) translateZ(-20px);
			opacity: 0.6;
			filter: blur(3.8px);
		}

		20% {
			transform: translateX(12%) rotateX(-2deg) rotateY(2deg) rotateZ(-8deg) scaleY(0.3) skewX(8deg) translateZ(-20px);
			opacity: 0.5;
			filter: blur(3.6px);
		}

		30% {
			transform: translateX(15%) rotateX(-3deg) rotateY(3deg) rotateZ(-10deg) scaleY(0.4) skewX(10deg) translateZ(-20px);
			opacity: 0.4;
			filter: blur(3.4px);
		}

		40% {
			transform: translateX(13%) rotateX(-2.5deg) rotateY(2.5deg) rotateZ(-9deg) scaleY(0.35) skewX(9deg) translateZ(-20px);
			opacity: 0.45;
			filter: blur(3.2px);
		}

		50% {
			transform: translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleY(0.15) skewX(0deg) translateZ(-20px);
			opacity: 0.7;
			filter: blur(4px);
			transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}

		60% {
			transform: translateX(-13%) rotateX(2.5deg) rotateY(-2.5deg) rotateZ(9deg) scaleY(0.35) skewX(-9deg) translateZ(-20px);
			opacity: 0.45;
			filter: blur(3.2px);
		}

		70% {
			transform: translateX(-15%) rotateX(3deg) rotateY(-3deg) rotateZ(10deg) scaleY(0.4) skewX(-10deg) translateZ(-20px);
			opacity: 0.4;
			filter: blur(3.4px);
		}

		80% {
			transform: translateX(-12%) rotateX(2deg) rotateY(-2deg) rotateZ(8deg) scaleY(0.3) skewX(-8deg) translateZ(-20px);
			opacity: 0.5;
			filter: blur(3.6px);
		}

		90% {
			transform: translateX(-6%) rotateX(1deg) rotateY(-1deg) rotateZ(4deg) scaleY(0.2) skewX(-4deg) translateZ(-20px);
			opacity: 0.6;
			filter: blur(3.8px);
		}

		100% {
			transform: translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleY(0.15) skewX(0deg) translateZ(-20px);
			opacity: 0.7;
			filter: blur(4px);
		}
	}

	@keyframes rippleAnimation4 {
		0% {
			transform: translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleY(0.1) skewX(0deg) translateZ(-30px);
			opacity: 0.6;
			filter: blur(5px);
		}

		10% {
			transform: translateX(4%) rotateX(-0.5deg) rotateY(0.5deg) rotateZ(-2deg) scaleY(0.12) skewX(2deg) translateZ(-30px);
			opacity: 0.5;
			filter: blur(4.8px);
		}

		20% {
			transform: translateX(8%) rotateX(-1deg) rotateY(1deg) rotateZ(-4deg) scaleY(0.18) skewX(4deg) translateZ(-30px);
			opacity: 0.4;
			filter: blur(4.6px);
		}

		30% {
			transform: translateX(10%) rotateX(-1.5deg) rotateY(1.5deg) rotateZ(-5deg) scaleY(0.2) skewX(5deg) translateZ(-30px);
			opacity: 0.3;
			filter: blur(4.4px);
		}

		40% {
			transform: translateX(9%) rotateX(-1.2deg) rotateY(1.2deg) rotateZ(-4.5deg) scaleY(0.19) skewX(4.5deg) translateZ(-30px);
			opacity: 0.35;
			filter: blur(4.2px);
		}

		50% {
			transform: translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleY(0.1) skewX(0deg) translateZ(-30px);
			opacity: 0.6;
			filter: blur(5px);
			transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
		}

		60% {
			transform: translateX(-9%) rotateX(1.2deg) rotateY(-1.2deg) rotateZ(4.5deg) scaleY(0.19) skewX(-4.5deg) translateZ(-30px);
			opacity: 0.35;
			filter: blur(4.2px);
		}

		70% {
			transform: translateX(-10%) rotateX(1.5deg) rotateY(-1.5deg) rotateZ(5deg) scaleY(0.2) skewX(-5deg) translateZ(-30px);
			opacity: 0.3;
			filter: blur(4.4px);
		}

		80% {
			transform: translateX(-8%) rotateX(1deg) rotateY(-1deg) rotateZ(4deg) scaleY(0.18) skewX(-4deg) translateZ(-30px);
			opacity: 0.4;
			filter: blur(4.6px);
		}

		90% {
			transform: translateX(-4%) rotateX(0.5deg) rotateY(-0.5deg) rotateZ(2deg) scaleY(0.12) skewX(-2deg) translateZ(-30px);
			opacity: 0.5;
			filter: blur(4.8px);
		}

		100% {
			transform: translateX(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleY(0.1) skewX(0deg) translateZ(-30px);
			opacity: 0.6;
			filter: blur(5px);
		}
	}
</style>